<!DOCTYPE html>
<html lang="en">

<head>
    <title>QSKJ_LOCAL</title>
    <script src="/Public/js/tianditu.api.js"></script>
    <script src="/Public/js/jquery-3.7.1.min.js"></script>
    <script src="/Public/js/utilsForTianditu.js"></script>
    <style>
        #mapDiv {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            /* min-height: calc(100vh - 50px); */
        }

        .test {
            position: absolute;
            bottom: 100px;
            z-index: 450;
        }

        #addPoint {
            left: 50px;
        }

        #cal {
            left: 120px;
        }

        #close {
            left: 162px;
        }
    </style>
</head>

<body>
    <div id="mapDiv">
        <button class="test" id="addPoint">添加点位</button>
        <button class="test" id="cal">计算</button>
        <button class="test" id="close">关闭</button>
    </div>
    <script>
        var icon = new T.Icon({
            iconUrl: "/Public/imgs/marker-icon.png",
            iconSize: new T.Point(19, 27),
            iconAnchor: new T.Point(10, 25)
        });

        var icon_proj = new T.Icon({
            iconUrl: "/Public/imgs/marker-icon2.png",
            iconSize: new T.Point(25, 25),
            iconAnchor: new T.Point(10, 25)
        });

        var map = new T.Map("mapDiv")
        var zoom = 10;
        var markerList = []
        var marker_proList = []
        var line_proList = []
        var m_polyline = "";
        var marker_proj_indexList = []
        var marker_proj_coordList = []
        map.centerAndZoom(new T.LngLat(103, 30.0), zoom);
        map.disableDoubleClickZoom(); //禁用双击地图放大
        $.get("/Public/data/single-river.json").then(function (data) {
            data.features.forEach(feature => {
                m_polyline = feature.geometry.paths[0]
                var points = []
                feature.geometry.paths[0].forEach(point => {
                    points.push(new T.LngLat(point[0], point[1]))
                })
                var line = new T.Polyline(points, {
                    color: "#0080ff",
                    weight: 2,
                    opacity: 1.0,
                    lineStyle: "dashed",
                });
                map.addOverLay(line);
            })
        })

        $("#addPoint").click(function () {
            setTimeout(function () {
                map.removeEventListener("click", MapClick);
                map.addEventListener("click", MapClick);
            }, 50);

        })

        $("#cal").click(function () {
            markerList.forEach(marker => {
                const point = [marker.getLngLat().lng, marker.getLngLat().lat]
                const projection = getProjectionPointWithIndex(m_polyline, point).projection;
                const p_index = getProjectionPointWithIndex(m_polyline, point).index
                marker_proj_coordList.push([projection, p_index])
                marker_proj_indexList.push(p_index)
                var marker = new T.Marker(new T.LngLat(projection[0], projection[1]), { icon: icon_proj });
                map.addOverLay(marker);
                marker_proList.push(marker)
            })
            if (markerList.length > 1) {
                var point_pro_index = marker_proj_indexList.sort((a, b) => a - b)
                var proje_index = marker_proj_coordList.sort((a, b) => a[1] - b[1])
                for (let i = 0; i < point_pro_index.length - 1; i++) {
                    var points = []
                    var points_cn = []
                    var slice_polyline = m_polyline.slice(point_pro_index[i], point_pro_index[i + 1] + 1)
                    points.push(new T.LngLat(proje_index[i][0][0], proje_index[i][0][1])) //段分线头部加入投影点
                    points_cn.push([proje_index[i][0][0], proje_index[i][0][1]])
                    slice_polyline.forEach(point => {
                        points.push(new T.LngLat(point[0], point[1]))
                        points_cn.push([point[0], point[1]])
                    })
                    points.splice(1, 1);//移除原生段分线第一个点
                    points_cn.slice(1,1)
                    points.push(new T.LngLat(proje_index[i + 1][0][0], proje_index[i + 1][0][1]))//段分线尾部加入
                    points_cn.push([proje_index[i + 1][0][0], proje_index[i + 1][0][1]])
                    // 投影点
                    console.log("总长度:", calculateProjectionLength(points_cn).toFixed(2) + "米");
                    var line = new T.Polyline(points, {
                        color: "#d147bb",
                        weight: 2,
                        opacity: 1.0,
                        lineStyle: "solid",
                    });
                    map.addOverLay(line);
                    line_proList.push(line)
                }
            }


            map.removeEventListener("click", MapClick);
        })
        $("#close").click(function () {
            map.removeEventListener("click", MapClick);
            markerList.forEach(marker => {
                map.removeOverLay(marker)
            })
            marker_proList.forEach(marker_pro => {
                map.removeOverLay(marker_pro)
            })
            line_proList.forEach(line_pro => {
                map.removeOverLay(line_pro)
            })
            marker_proj_indexList = []
            markerList = []
            marker_proj_coordList = []
        })
        function MapClick(e) {
            var marker = new T.Marker(new T.LngLat(e.lnglat.lng, e.lnglat.lat), { icon: icon });
            map.addOverLay(marker);
            markerList.push(marker)
            // console.log(e.lnglat)
        }

        const route = [
                [116.4074, 39.9042],  // 北京（117°带）
                [117.2300, 39.1350],  // 天津（117°带）
                [121.4737, 31.2304]   // 上海（123°带）
            ];
        //     console.log("总长度:", calculateProjectionLength(route).toFixed(2) + "米");
    </script>
</body>

</html>